<template>
  <ElInput
    v-if="showInput"
    v-model="props.data[props.field.name]"
    :type="inputType"
    :placeholder="placeholderText"
    :rows="props.field.rows || 3"
    :show-password="isPassword"
    clearable
  />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { PropType } from 'vue'

const emit = defineEmits([
  'update:value',
]);

const props = defineProps({
  field: {
    type: Object as PropType<Record<string, any>>,
    required: true,
    default: () => ({})
  },
  data: {
    type: Object as PropType<Record<string, any>>,
    default: () => ({})
  },
})

// 使用计算属性优化模板逻辑
const showInput = computed(() => {
  return ['Input', 'Textarea', 'Password'].includes(props.field.controlType)
})

const inputType = computed(() => {
  switch (props.field.controlType) {
    case 'Textarea': return 'textarea'
    case 'Password': return 'password'
    default: return 'text'
  }
})

const placeholderText = computed(() => {
  return props.field.label ? `请输入${props.field.label}` : ''
})

const isPassword = computed(() => {
  return props.field.controlType === 'Password'
})

const fieldValue = computed({
  get: () => props.data[props.field.name],
  set: (value) => {
    emit('update:value', value)
  }
})

</script>